<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>坐标轴 - 拓展（绑定姓名）</title>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
	<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
	</style>
</head>
<body>

	
<svg></svg>




</body>
<script type="text/javascript">



var width = 500;  //画布的宽度
var height = 300;   //画布的高度
var svg_l = 100;	//画布左边留边
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

var svg = d3.select("svg")     //选择文档中的body元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度
//var dataset = [ 250 , 210 , 170 , 130 , 90 ,300];
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ,3.3];
//var dataset = [ 2500, 2100, 1700, 1300, 900 ];

var names = ["张三1","张三2","张三3","张三4","张三5","张三6","张三7"];
//dataset 和names映射
var ordinal = d3.scale.ordinal()
        .domain(dataset)
        .range(names);
//console.log(ordinal(210));//张三2

var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scale.linear()
        .domain([0, max])
        .range([0, 300]);

//console.log(linear(2.3));

var axis = d3.svg.axis()
	.scale(linear) //指定比例尺
	.orient("bottom")   //指定刻度的方向
	.ticks(7);          //指定刻度的数量


svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
    .attr("x",svg_l)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue")
    
svg.selectAll("g")
	.data(dataset)
	.enter()
    .append('g')
    .append("text")
//  .attr("dx", 60)
    .attr("dx", function(d,i){
    	return linear(d) + svg_l + 10
    })
    .attr("dy", function(d,i){
    	return i * rectHeight + 17
    })
    .text(function(d,i){return ordinal(d) + "（" + d + "）"});

//刻度尺垂直位置：
var y_int = 5 + dataset.length * rectHeight;
//console.log(y_int);

svg.append("g")
	.attr("class","axis")
	.attr("transform","translate("+ svg_l +","+ y_int +")")
	.call(axis);

</script>
</html>
